<template>
    <div class="app-container calendar-list-container">
        <div class="filter-container justify-between">
            <div>
            </div>
            <div>
                <el-input @keyup.enter.native="doSearch" style="width: 200px;" class="filter-item" placeholder="输入名称搜索"
                          v-model="listQuery.keyword">
                </el-input>
                <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="doSearch">搜索
                </el-button>
            </div>
        </div>
        <el-table  ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="给我一点时间"
                   border fit highlight-current-row style="width: 100%"  @selection-change="onSelectionChange"  height="500">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left"  label="岗位名">
                <template slot-scope="scope">
                    <span>{{scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="left"  label="单位名">
                <template slot-scope="scope">
                    <span>{{scope.row.dept_name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left"  label="培训配置" >
                <template slot-scope="scope">
                    <span v-if="scope.row.train_content&&scope.row.train_content!='null'">{{scope.row.train_content | showTrainMun()}}</span>
                    <span v-else>未配置</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="操作" class-name="small-padding fixed-width" fixed="right" width="500">
                <template slot-scope="scope">
                    <el-button round size="mini" type="primary" @click="showWin(scope.row.id)"  >培训配置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="onSizeChange" @current-change="onCurrentChange"
                           :current-page="listQuery.pageNumber" :page-sizes="[12,50,100,10000]" :page-size="listQuery.pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="培训配置" :visible.sync="dialogWinVisible">
            <el-form  :model="bean" label-position="right" label-width="120px" style='width: 400px; margin-left:50px;'>
                <template>
                    <el-form-item  label="岗位名" prop="name">
                        <el-input v-model="bean.name" placeholder="输入岗位名" disabled></el-input>
                    </el-form-item>
                    <el-form-item  :label="'第'+(index+1)+'阶段培训'" v-for="train,index in bean.train_list">
                        <el-input v-model="train.train_list_name" placeholder="配置培训项" @click.native="showChooseWin(train.train_content,index)"></el-input>
                        <el-button type="danger" size="mini" v-if="(parseInt(index)+1)==bean.train_list.length" @click="deleteTrain">删除</el-button>
                    </el-form-item>
                    <div class="form-group ">
                        <div class="col-sm-12 text-center">
                            <el-button type="primary" class="add-interview-btn" @click="addTrain">添加培训项目</el-button>
                        </div>
                    </div>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveBean" :loading="dealing">确定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="配置培训项" :visible.sync="dialogChooseVisible" style="">
            <div class="page-choose_peixun">
                <div class="muban-list">
                    <div v-for="item,index in train_bean.current_train_content" class="muban-item" >{{item.name}}
                        <i class="iconfont icon-cuohao icon-delete" @click="deleteOption()"></i>
                    </div>
                </div>
                <div class="train_type_list">
                    <span v-for="train_type,index in train_type_list" :class="{train_type_btn:true,active:train_bean.current_index==index}"
                    @click="switchTrainType(index)">{{train_type.data_text}}</span>
                </div>
                <div class="train_list">
                    <div class="train_item" v-for="train_item,index in train_bean.train_list"
                         v-if="train_type_list[train_bean.current_index].data_value==0|| train_item.train_type == train_type_list[train_bean.current_index].data_value">
                        <div class="name" >
                            {{train_item.name}}
                        </div>
                        <div class="type">
                            {{train_item.train_type | show_basedatas('train_type')}}
                        </div>
                        <div class="file">
                            {{train_item.file_name}} <a class="download-btn" download :href="train_item.file_url">下载</a>
                        </div>
                        <div class="choose-btn"  @click="chooseOptions(train_item)" v-if="showBtn(train_item.name)">选择</div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTrainOption" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
	import Vue from 'vue'
	import waves from '@/directive/waves' // 水波纹指令
	import API from '@/api'
	import Http from '@/http'
	import Store from '@/store'
	import Msg from '@/utils/msg'
	import Utils from '@/utils/common'
	import {mapGetters} from 'vuex'
	import _ from 'underscore'
	import Qiniu from '@/utils/qiniu'

	export default {
		directives: {waves},
		data() {
			return {
				dealing: false,
				list: [],
				total: 0,
				listLoading: true,
				listQuery: {
					pageNumber: 1,
					pageSize: 12,
					keyword: '',
					status: ''
				},
				bean:{
				},
				train_bean:{

                },
				train_type_list:[],
				multipleSelection: [],
				dialogWinVisible:false,
				dialogChooseVisible:false,
			}
		},
		filters: {},
		components: {},
		created() {
			this.loadList()
            this.train_type_list = _.clone(Store.getters.basedata.train_type)
			this.train_type_list.unshift({data_value:0,data_text:'全部培训'})
            console.log("train_type_list:",this.train_type_list)
		},
		computed: {
			...mapGetters([
				'company'
			]),
		},
		mounted(){
		},
		methods: {
			loadList() {
				this.listLoading = true
				Http.getModel(API.get_job_list, this.listQuery, false).then((json) => {
					if (json.code == 0) {
						var list = json.data.list
						list.forEach(function(item){
							item.ext_info_obj = JSON.parse(item.ext_info)
						})
						this.list = list
						this.total = parseInt(json.data.total)
						this.listLoading = false
					}
				})
			},
			showBtn(name){
				var train_bean = this.train_bean
				for(var i in train_bean.current_train_content){
					if(train_bean.current_train_content[i].name==name){
						return false;
					}
				}
				return true;
            },
			chooseOptions(item){
				this.train_bean.current_train_content.push(item)
            },
			deleteOption(index){
				this.train_bean.current_train_content.splice(index,1)
            },
			switchTrainType(index){
				this.train_bean.current_index = index
            },

			addTrain(){
				var leng = this.bean.train_list.length
				if(leng==0||this.bean.train_list[leng-1].train_list_name){
					this.bean.train_list.push({})
				}else{
					Msg.error("请先完善上个培训项！")
				}
			},
			deleteTrain(){
				this.bean.train_list.pop()
			},
			saveTrainOption(){
				if(this.train_bean.current_train_content.length>0){
					var list = this.train_bean.current_train_content
                    var str_arr = []
					for(var i=0;i<list.length;i++){
						str_arr.push(list[i].name)
					}
					console.log("this.train_bean.current_train_content:",this.train_bean.current_train_content)
                    var index = this.train_bean.index
                    this.bean.train_list[index].train_content = list
					this.bean.train_list[index].train_list_name = str_arr.join()
					this.dialogChooseVisible = false
				}else{
					Msg.error('请选择培训项目！')
				}
			},
			showChooseWin(train_content,index){
				this.dialogChooseVisible = true
				Http.getModel(API.get_train_list, {pageSize: 10000}).then((json) => {
					if (json.code == 0) {
						this.train_bean = {
							index:index,
							current_train_content:train_content ? train_content : [],
							current_index:0,
							train_list:json.data.list
						}
						console.log("train_bean:",this.train_bean)
					}
				})
			},
			showWin(id) {
				this.dialogWinVisible = true
				this.loadBean(id)
			},
			loadBean(id) {
				Http.getModel(API.get_job, {id: id}).then((json) => {
					if (json.code == 0) {
						var bean = json.data;
						if(bean.train_content&&bean.train_content!="null"){
							bean.train_list = JSON.parse(bean.train_content);
						}else{
							bean.train_list = [];
						}
						console.log("112",bean.train_list)
						this.bean = bean
					}
				})
			},
			saveBean(){
				var train_content_arr = []
				var list = this.bean.train_list
                for(var i=0;i<list.length;i++){
					train_content_arr.push({train_content:list[i].train_content,train_list_name:list[i].train_list_name})
                }
				var params = {
					id:this.bean.id,
					train_content:JSON.stringify(train_content_arr)
				}
				Http.getModel(API.save_job_train, params).then((json) => {
					if (json.code == 0) {
						Msg.success("保存成功！",()=>{
							this.dialogWinVisible = false
                            this.loadList()
						})
					}
				})
			},
			/***   公用部分 start ***/
			onSelectionChange(val) {
				this.multipleSelection = val;
			},
			doSearch() {
				this.listQuery.page = 1
				this.loadList()
			},
			onSizeChange(val) {
				this.listQuery.pageSize = val
				this.loadList()
			},
			onCurrentChange(val) {
				this.listQuery.pageNumber = val
				this.loadList()
			},
			/***   公用部分 end ***/
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    .page-choose_peixun{
        .muban-list{
            border:1px solid #999;
            padding:20px;
            .muban-item{
                padding:0 20px;
                background:#eee;color:#999;
                display:inline-block;
                margin:0 10px 6px;
                height:24px;
                line-height:24px;
                font-size:14px;
                cursor: pointer;
                .iconfont{
                    margin-left:2em;
                    color:#ff0000;
                    font-size:1em;
                    line-height:1em;
                }
            }
        }
        .train_type_list{
            margin-top:20px;
            span{
                background:#f6f6f6;
                color: #666;
                padding:0 20px;
                margin:4px 10px;
                line-height:2;
                display:inline-block;
                cursor: pointer;
            }
            .active{
                background:#009999;
                color: #fff;
            }
        }
        .train_list{
            border:1px solid #999;
            padding:20px;
            margin-top:30px;
            .train_item{
                background:#f2f2f2;
                display:flex;
                align-items:center;
                line-height:2.4em;
                height:2.4em;
                margin-bottom:10px;
                text-align:center;
                .name{
                    width:15%;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .type{
                    width:15%;
                }
                .file{
                    flex:1;
                    text-align:left;
                    margin-left:5%;
                    span{
                        text-decoration: underline;
                        color:#009999;
                        margin-left:10px;
                    }
                }
                .delete-btn{
                    background:#ff9933;
                    color:#fff;
                    width:4em;
                    text-align:center;
                    line-height:2em;
                    height:2em;
                }
                .choose-btn{
                    background:#009999;
                    color:#fff;
                    width:4em;
                    text-align:center;
                    line-height:1.8em;
                    height:1.8em;
                    font-size:14px;
                    margin-right:6px;
                    cursor: pointer;
                }
            }
        }
        .btn-ct {
            margin-top:30px;
            text-align: center;
            .error-tips {
                background: white;
                position: absolute;
                color: red;
                font-weight: bold;
            }
            button {
                background: #999;
                border: 0;
                font-size: 14px;
                color: white;
                padding: 8px 26px;
                &.ok {
                    background: #2196F3;
                }
            }
        }
    }

</style>
